<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.regCont label{display:block;float:left;}
.err{color:#F00;}
.succ{color:#12A708;}
</style>
</head>
<body>
<div class="regCont">
	<div>
		<label><i>*</i>用户名：</label>
		<div><input type="text" id="username"></div>
	</div>
	<div>
		<label><i>*</i>密码：</label>
		<div><input type="password" id="pwd"></div>
	</div>
</div>
<script>
/*
用户名要求：
1、长度  4-16
2、格式  [0-9a-z_]

input:  blur  change
*/
function $(s){
	return document.querySelectorAll(s);
}
var username=$("#username")[0];
//以数字、字母或下划线开始，重复1到多次，结束
//[a-z]!=\w   аdmin  admin
var username_Reg=/^[0-9a-z_]+$/g;
username.onchange=function(){
	var val=this.value;
	if(val.length<4||val.length>16){
		//错误信息，通过函数调用
		error(this,"错误：用户名长度为4-16位。","err");
	}else if(!username_Reg.test(val)){
		error(this,"错误：用户名格式错误。","err");
	}else{
		error(this,"正确。","succ");
	}
}
function error(ele,msg,cls){
	//参数：ele-当前输入框，msg-提示信息，cls-class名字，分为错误err,正确succ
	//var span=ele.parentNode.getElementsByTagName("span")[0];
	var span=ele.nextElementSibling
	if(!span){//检测当前输入框后面有没有span标签,没有就创建
		span=document.createElement("span");
		ele.parentNode.appendChild(span);
	}
	span.innerHTML=msg
	span.className=cls
}
pwd.onchange=function(){
	if(this.value==""){
		error(this,"错误","err")
	}
}
</script>	
</body>
</html>